<template>
    <div>
        <Card>
            <Row class="form-row">
                <Form :model="filters" ref="form1" label-position="right" :label-width="90" inline>
                    <FormItem label="上级机构">
                        <div class="filters-input" style="width: 250px;">
                            <treeselect :options="optionsDepart" noChildrenText="没有子节点" noOptionsText="暂无选项"
                                        noResultsText="没有发现结果" :default-expand-level="1" placeholder="选择上级机构"
                                        :show-count="true" v-model="filters.treeid"/>
                        </div>
                    </FormItem>
                    <FormItem label="小区名称" prop="name">
                        <div class="filters-input" style="width: 250px;">
                            <Input v-model="filters.name" placeholder="小区名称"/>
                        </div>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" icon="ios-search" @click="handleQuery('form1')">
                            搜索
                        </Button>
                    </FormItem>
                </Form>
            </Row>
            <Row class="form-row">
                <Button type="primary" icon="md-add" @click="handleAdd()">
                    新增
                </Button>
            </Row>
            <el-table stripe border :loading="tableLoading" :data="tableData" ref="table" size="width: 100%">
                <template slot="empty">暂无数据</template>
                <el-table-column label="小区名称" prop="name"></el-table-column>
                <el-table-column label="联系地址" prop="address"></el-table-column>
                <el-table-column label="社区ID" prop="communityId"></el-table-column>
                <el-table-column label="认证方式" prop="isNeedAuth" :formatter="formatterPayType"></el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-dropdown>
                            <el-button type="primary">
                                操作<i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown" align="center">
                                <el-dropdown-item @click.native="handleAdd( scope.row)">修改</el-dropdown-item>
                                <!--<el-dropdown-item @click.native="handleCreate( scope.row)">物业缴费二维码</el-dropdown-item>-->
                                <el-dropdown-item @click.native="delDept( scope.row.id)">删除</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </Card>

        <Modal v-model="formVisible" :title="housing && housing.id ? '修改' : '新增'" class="modal-content" width="900px">
            <Form :model="housing" :rules="rules" ref="hosuingForm" label-position="right" :label-width="90">
                <FormItem label="物业" prop="parentId">
                    <Select v-model="housing.parentId" placeholder="物业" clearable
                            :disabled="housing.id ? true : false" style="width: 100%">
                        <Option v-for="item in deptList" :value="item.id" :key="item.id"
                                :label="item.name">
                        </Option>
                    </Select>
                </FormItem>
                <FormItem label="小区名称" prop="name">
                    <Input v-model="housing.name" placeholder="小区名称"/>
                </FormItem>
                <FormItem label="小区地址" prop="address">
                    <Input v-model="housing.address" placeholder="小区地址"/>
                </FormItem>
                <FormItem label="认证方式" prop="isNeedAuth">
                    <el-select v-model="housing.isNeedAuth" style="width: 100%">
                        <el-option v-for="item in isNeedAuthList" :value='item.value' :label="item.label"></el-option>
                    </el-select>
                </FormItem>
                <FormItem label="服务电话">
                    <Input v-model="housing.hotline" placeholder="服务电话"/>
                </FormItem>
            </Form>

            <div slot="footer">
                <Button type="text" @click="formVisible = false">取消</Button>
                <Button type="primary" @click="handleSubmit" :loading="formLoading">确定</Button>
            </div>
        </Modal>
        <!--物业缴费二维码pop-->
        <!--<Modal v-model="formCode" title="物业缴费二维码" class="modal-content" width="350" :mask-closable="false">
            <div id="qrcode"></div>
            <div slot="footer">
                <Button type="primary" size="large" @click="formCode =  false">确定</Button>
            </div>
        </Modal>-->
    </div>
</template>


<script>
    import Treeselect from "@riophae/vue-treeselect";
    import QRCode from 'qrcodejs2'
    import baseURL from '../../../config/url'

    export default {
        components: {
            Treeselect
        },
        data() {
            return {
                rules: {
                    parentId: [{
                        required: true,
                        message: "请选择物业",
                    }],
                    name: [{
                        required: true,
                        message: "请输入小区名称",
                    }],
                    address: [{
                        required: true,
                        message: "请输入小区地址",
                    }],
                    hotline: [{
                        required: true,
                        message: "请输入服务电话",
                    }],
                    isNeedAuth: [{
                        required: true,
                        message: "请选择是否需要验证",
                    }],
                },
                // formCode: false,
                deptList: [],
                //查询条件
                filters: {},
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                //选择上级机构
                optionsDepart: [],
                //表格数据
                tableData: [],
                //表格字段
                tableColumn: [],
                //数据表格隐藏那个状态
                tableLoading: false,
                //对话框隐藏状态
                formVisible: false,
                //表单提交状态
                formLoading: false,
                housing: {},
                isNeedAuthList: [
                    {
                        value: 0,
                        label: "无"
                    },
                    {
                        value: 1,
                        label: "手机认证"
                    },
                    {
                        value: 2,
                        label: "身份证认证"
                    },
                ]
            };
        },
        created: function () {
            this.loadDepart();
            this.loadData();
            this.getdeptList();
        },
        methods: {
            //加载物业
            getdeptList() {
                this.getRequest("/api/dept/getDeptByCode").then(res => {
                    if (res.code == 20000) {
                        this.deptList = res.data;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //加载数据
            loadData() {
                if (this.tableLoading) return;
                this.tableLoading = true;
                let params = this.filters;
                params.parentId = this.filters.treeid;
                params.pageNum = this.pageNum;
                params.pageSize = this.pageSize;
                //与后台交换数据
                this.postRequest("/api/housing/loadData", params).then(res => {
                    this.tableLoading = false;
                    if (res.code == 20000) {
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    } else {
                        this.tableData = [];
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //打开新增修改页面
            handleAdd(row) {
                this.housing = {};
                if (row) {
                    this.housing = row;
                }
                console.log(this.housing);
                this.formVisible = true;
            },
            //保存新增修改
            handleSubmit() {
                this.$refs["hosuingForm"].validate(valid => {
                    if (valid) {
                        this.formLoading = true;
                        this.postRequest("/api/housing/saveOrUpdate", this.housing).then(res => {
                            this.tableLoading = false;
                            if (res.code == 20000) {
                                this.formLoading = false;
                                this.formVisible = false;
                                this.$Message.success("保存成功！");
                                this.loadData();
                            } else {
                                this.formLoading = false;
                                this.$Message.error({
                                    content: res.message,
                                    duration: 5
                                });
                            }
                        });
                    }
                });
            },
            //加载上级机构
            loadDepart() {
                this.postRequest("/api/user/treeList").then(res => {
                    if (res.code == 20000) {
                        this.optionsDepart = res.data;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //删除小区
            delDept(id) {
                this.$Modal.confirm({
                    title: '提示',
                    content: '确定删除该小区？',
                    onOk: () => {
                        this.getRequest("/api/housing/deleteById?id=" + id).then(res => {
                            this.tableLoading = false;
                            if (res.code == 20000) {
                                this.$Message.success("删除成功!");
                                this.pageNum = 1;
                                this.loadData();
                            } else {
                                this.$Message.error({
                                    content: res.message,
                                    duration: 5
                                });
                            }
                        });
                    },
                });
            },
            //认证类型
            formatterPayType(row, column) {
                if (row.isNeedAuth == 0) {
                    return "无";
                } else if (row.isNeedAuth == 1) {
                    return "手机认证";
                } else if (row.isNeedAuth == 2) {
                    return "身份证认证";
                }
            },
            //缴费二维码
            /*handleCreate(row) {
                console.log(row)
                this.formCode = true;
                document.getElementById('qrcode').innerHTML = '';
                let qrcode = new QRCode('qrcode', {
                    width: 300,
                    height: 300, // 高度
                    text: baseURL + '/common/redirectQRcode?shhAppId=' + row.shhAppId + "&" + "gzhAppId=" + row.gzhAppId
                })
            },*/
            //查询
            handleQuery(name) {
                this.filters.pageNum = 1;
                this.$refs[name].validate(valid => {
                    if (valid) {
                        this.loadData();
                    }
                });
            },
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
        }
    }
</script>

<style lang="less" scoped>
    .avatar-uploader-icon-oneImg {
        font-size: 28px;
        color: #8c939d;
        width: 250px;
        height: 120px;
        line-height: 120px;
        text-align: center;
        border: 1px solid #ccc;
    }

    .avatar-oneImg {
        width: 250px;
        height: 120px;
        display: block;
        border: 1px solid #ccc;
    }

    .span-title {
        font-size: 16px;
        color: #000c17;
        line-height: 40px;
        padding-left: 10px;
    }
</style>
